@extends('admin.layout.layout', ['row' => @$page])

@section('contain')
    <style>
        .form-other {
            display: none;
        }
        .warranty-image-wrapper, .qrcode-image-wrapper{
            display: flex;
            flex-wrap: wrap;
        }
        .warranty-image-wrapper .warranty-image-list, .qrcode-image-wrapper .qrcode-list, .warranty-image-picture-list {
            display: flex;
            flex-wrap: wrap;
        }
        .warranty-image-wrapper .warranty-image-list .item, .qrcode-image-wrapper .qrcode-list .item, .warranty-image-picture-list .item{
            width: 100px;
            flex: 0 0 100px;
            height: 100px;
            padding: 0;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: block;
            position: relative;
        }
        .warranty-image-wrapper .warranty-image-list .item, .qrcode-image-wrapper .qrcode-list, .warranty-image-picture-list .item{
            margin: 10px;
        }
        .warranty-image-wrapper .warranty-image-list .item img, .qrcode-image-wrapper .qrcode-list img, .warranty-image-picture-list .item img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .warranty-image-wrapper .warranty-image-list .item .x-close,.qrcode-image-wrapper .qrcode-list .x-close, .warranty-image-picture-list .x-close {
            font-size: 16px;
            position: absolute;
            top: 4px;
            right: 4px;
            z-index: 99;
            font-weight: lighter;
            text-shadow: none;
            display: block;
            cursor: pointer;
        }
        .warranty-image-wrapper .warranty-image-list .item .x-close:hover, .qrcode-image-wrapper .qrcode-list .x-close:hover{
            color: #f00;
        }
        .warranty-image-wrapper .add,.qrcode-image-wrapper .qrcode-list{
            width: 100px;
            flex: 0 0 100px;
            height: 100px;
            padding: 0;
            overflow: hidden;
            box-sizing: border-box;
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            border: 1px solid #eee;
            cursor: pointer;
            position: relative;
            margin: 10px;
        }

        .warranty-image-wrapper .add .open, .qrcode-image-wrapper .open{
            font-size: 64px;
            line-height: 1em;
            color: #666;
        }
        .warranty-image-wrapper .add .store-upload-image, .cert_picture{
            display: block;
            position: absolute;
            opacity: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
            z-index: 29;
        }
        .warranty-image-wrapper .add .upload-image, .picture-upload-image{
            display: block;
            position: absolute;
            opacity: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
            z-index: 29;
        }

        .warranty-image-wrapper .add .person_upload_image, .cert_picture{
            display: block;
            position: absolute;
            opacity: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
            z-index: 29;
        }
        .detail-image-area .item img, .qrcode-list img, .picture-image-wrapper .item img{
            width: 100%;
            height: 100%;
        }
        .detail-image-area .item .x-close, .qrcode-image-wrapper .item .x-close, .picture-image-wrapper .item .x-close {
            font-size: 16px;
            position: absolute;
            top: 4px;
            right: 4px;
            z-index: 99;
            font-weight: lighter;
            text-shadow: none;
            display: block;
            cursor: pointer;
        }
        .detail-image-area .item .x-close:hover, .picture-image-wrapper .item .x-close:hover{
            color: #f00;
        }
        .warranty-image-wrapper .add .store-upload-image, .store-upload-detail-image, .qrcode_image, .store-upload-picture-image{
            display: block;
            position: absolute;
            opacity: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
            z-index: 29;
        }
    </style>
    <div class="portlet">
        <div class="portlet-title">
            <div class="caption">
                <x-portlet-breadcrumb :page="$page"></x-portlet-breadcrumb>
            </div>
            <div class="actions">
            </div>
        </div>

        <form class="dealer-form">
            @csrf
            <h3 class="section_sub_title">{{ ts('baseinformation') }}</h3>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('JXSZH') }}</div>
                <div class="form-input">
                    <div class="input-group custom-control-inline">
                        <input type="text" name="unique_id" value="{{ $data->unique_id ?: old('unique_id') }}" class="form-control" readonly>
                        {{--<div class="input-group-prepend">
                            <span class="btn btn-primary" onclick="checkUniqueId()">{{ ts('examine') }}</span>
                        </div>--}}
                    </div>
                    <div id="did1" class="alert alert-danger alert-dismissable">{{ ts('DCL2') }}</div>
                </div>
                <div class="text-secondary ml-3 mt-1">{{ ts('DCL1') }}</div>
            </div>


            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('status') }}</div>
                <div class="form-input">
                    <select name="status" class="form-control">
                        <option value="1" {{ ($data->status == 1 || old('status')==1) ? 'selected' : '' }}>{{ ts('active') }}</option>
                        @if ($user_type != 2)
                        <option value="0" {{ ($data->status != 1 && old('status')!=1) ? 'selected' : '' }}>{{ ts('deactive') }}</option>
                        @endif
                    </select>
                </div>
            </div>

            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('dmmc') }}</div>
                <div class="form-input">
                    <input type="text" name="abbr" value="{{ old('abbr') }}" class="form-control" required>
                </div>
            </div>

            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('companyname') }}</div>
                <div class="form-input">
                    <input type="text" name="company_name" value="{{ old('company_name') }}" class="form-control" required>
                </div>
            </div>

   <div class="form-item form-s1">
    <div class="form-label" required="">{{ ts('jxsjb') }}</div>
    <div class="form-input">
        <select name="mdtype" class="form-control" >
            @php
               
                $userType = session()->get('admin.user_type');
              
				
				  $fullRange = range(0, 9);
    $optionsRange = ($userType == 2 && count($fullRange) >= 5) ? [$fullRange[2], $fullRange[4], $fullRange[7]]: $fullRange;
                                   @endphp
            
            @foreach($optionsRange as $v)
                <option value="{{ $v }}" {{ old('mdtype') == $v ? 'selected' : '' }}>
                    {{ ts('mdtype'.$v) }}
                </option>
            @endforeach
        </select>
    </div>
</div>

@foreach(range(0,2) as $k)
            <div class="form-item form-s1">
                <div class="form-label" >{{ ts('jsdj') }}</div>
                <div class="form-input">
                    <select name="jsdj[]" class="form-control"@if(!in_array(session()->get('admin.user_type'), [1, 4])) disabled @endif>
                        @foreach(range(0,4) as $v)
                            <option value="{{ $v }}">{{ ts('jsdj'.$v) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="form-item form-s1">
                <div class="form-label">{{ ts('认证技师') }}</div>
                <div class="form-input">
                    <table class="table table-s3 jsdj_persons-table text-nowrap align-top" style="border: 1px solid #dee2e6">
                        <tr>
                            <th>姓名</th>
                            <td>
                                <input type="text" name="jsdj_persons_name[]" class="form-control" value="" @if(!in_array(session()->get('admin.user_type'), [1, 4])) disabled @endif>
                            </td>
                        </tr>
                        <tr>
                            <th>照片</th>
                            <td>
                                <div class="warranty-image-wrapper js-image" id="jsdj_upload_image"> 
                                    <div class="warranty-image-list">
                                    </div>
                                    <div class="add">
                                        <i class="fa fa-plus open"></i>
                                        <input type="file" name="file"
                                            class="person_upload_image"
                                            id="jsdj"
                                            accept="image/*"
                                            @if(!in_array(session()->get('admin.user_type'), [1, 4])) disabled @endif/>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>手机号</th>
                            <td>
                                <input type="text" name="jsdj_persons_mobile[]" class="form-control" value="" @if(!in_array(session()->get('admin.user_type'), [1, 4])) disabled @endif>
                            </td>
                        </tr>
                        <tr>
                            <th>格言</th>
                            <td>
                                <input type="text" name="jsdj_persons_intro[]" class="form-control" value="" @if(!in_array(session()->get('admin.user_type'), [1, 4])) disabled @endif>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
@endforeach

            

            <div class="form-item form-s1">
                <div class="form-label">{{ ts('漆膜任务值') }}</div>
                <div class="form-input">
                    <input type="text" name="task_value" value="{{ old('task_value') }}" placeholder="0-100" class="form-control">
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label">{{ ts('窗膜任务值') }}</div>
                <div class="form-input">
                    <input type="text" name="win_task_value" value="{{ old('win_task_value') }}" placeholder="0-100" class="form-control">
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('SUPERIORDISTRIBUTOR') }}</div>
                <div class="form-input">
                    <select name="creator_id" class="form-control creator_id">
                        @if (!empty($distributions))
                        @foreach($distributions as $v)
                            <option value="{{ $v->id }}" {{ $data->creator_id == $v->id ? 'selected' : '' }}>{{ $v->abbr }}</option>
                        @endforeach
                        @endif
                    </select>
                </div>
            </div>



            <h3 class="section_sub_title">{{ ts('contactInformation') }}</h3>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('contactperson') }}</div>
                <div class="form-input">
                    <input type="text" name="first_name" value="{{ $data->first_name ?: old('first_name') }}" class="form-control" >
                </div>
            </div>

            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('PHONENUMBER') }}</div>
                <div class="form-input">
                    <div class=" input-group custom-control-inline">
                        <div class="input-group-prepend">
                            <select name="extension" class="form-control">
                                @foreach(\App\Models\PhoneExtension::get(['id', 'phone_ext']) as $v)
                                    <option value="{{ $v->phone_ext }}" {{ ($data->extension == $v->phone_ext || old('extension')==$v->phone_ext) ? 'selected' : '' }}>{{ $v->phone_ext }}</option>
                                @endforeach
                            </select>
                        </div>
                        <input type="number" name="phone_number" value="{{ $data->phone_number ?: old('phone_number') }}" class="form-control" >
                    </div>
                </div>
            </div>

            <div class="form-item form-s1">
                <div class="form-label">{{ ts('EMAIL') }}</div>
                <div class="form-input">
                    <input type="email" name="email_address" value="{{ $data->email_address ?: old('email_address') }}" class="form-control">
                    <div id="did3" class="alert alert-danger alert-dismissable">{{ ts('邮箱格式不符合规范！') }}</div>
                </div>
            </div>


            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('region') }}</div>
                <div class="form-input">
                    <select name="region_id" id="" class="form-control region_json" data-value="{{ $data->region_id ?: old('region_id') }}" >
                        <option value="">{{ ts('select') }}</option>
                        <option value="{{ $data->region_id ?: old('region_id') }}" selected>{{ ts('region_master.'.$data->region_id) }}</option>
                    </select>
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('province') }}</div>
                <div class="form-input">
                    <select name="province_id" id="" class="form-control province_json province_data" data-value="{{ $data->province_id ?: old('province_id')}}" >
                        <option value="">{{ ts('select') }}</option>
                        <option value="{{ $data->province_id ?: old('province_id') }}" selected>{{ ts('province_master.'.$data->province_id) }}</option>
                    </select>
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('city') }}</div>
                <div class="form-input">
                    <select name="city" id="" class="form-control city_json" data-value="{{ $data->city ?: old('city') }}" >
                        <option value="">{{ ts('select') }}</option>
                        <option value="{{ $data->city ?: old('city') }}" selected>{{ ts('cities.'.$data->city) }}</option>
                    </select>
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('addresss') }}</div>
                <div class="form-input">
                    <input type="text" name="address" value="{{ $data->address?: old('address') }}" class="form-control">
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label">{{ ts('付款账号') }}</div>
                <div class="form-input">
                    <input type="text" name="pay_account" value="{{ $data->pay_account?: old('pay_account') }}" class="form-control">
                </div>
            </div>

            {{--<div class="form-item form-s1">
                <div class="form-label">{{ ts('sjh') }}</div>
                <div class="form-input">
                    <input type="number" name="cell_phone" value="{{ $data->cell_phone ?: old('cell_phone') }}" class="form-control" >
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label">{{ ts('WECHATID') }}</div>
                <div class="form-input">
                    <input type="text" name="wechat_id" value="{{ $data->wechat_id ?: old('wechat_id') }}" class="form-control" >
                </div>
            </div>--}}

            <h3 class="section_sub_title">{{ ts('订货系统信息') }}</h3>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('店铺编号') }}</div>
                <div class="form-input">
                    <input id="new_store_code" type="text" name="new_store_code" readonly="true" value="" class="form-control" >
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('订货联系人') }}</div>
                <div class="form-input">
                    <input type="text" name="order_name" value="" class="form-control" >
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('订货手机号') }}</div>
                <div class="form-input">
                    <input type="text" name="order_mobile" value="" class="form-control" >
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('city') }}</div>
                <div class="form-input">
                    <select name="store_city" id="" class="form-control city_data_json" data-value="" >
                        <option value="">{{ ts('select') }}</option>
                        <option value="" selected></option>
                    </select>
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('收货地址') }}</div>
                <div class="form-input">
                    <input type="text" name="order_address" value="" class="form-control" >
                </div>
            </div>

            <h3 class="section_sub_title">{{ ts('报价系统使用情况') }}</h3>
            <div class="form-item form-s1">
                <table class="table table-s3 system-table text-nowrap align-top" style="border: 1px solid #dee2e6">
                    <tr><td>{{ ts('使用人') }}</td><td>{{ ts('系统类别') }}</td><td>{{ ts('PHONENUMBER') }}</td><td>{{ ts('OPERATIONS') }}</td></tr>
                    <tr>
                        <td>
                            <input type="text" name="system_user[]" class="form-control" value="" />
                        </td>
                        <td>
                            <select class="form-control" name="system_name[]">
                                <option value="">{{ ts('请选择') }}</option>
                                <option value="iphone">iphone</option>
                                <option value="ipad">ipad</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" name="system_phone[]" class="form-control" value="" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-info btn-sm add_system">{{ ts('添加') }}</button>
                        </td>
                    </tr>
                </table>
            </div>

            <h3 class="section_sub_title">{{ ts('TPXX') }}</h3>
            <div class="form-item form-s1">
                <div class="form-label" required="">
                    <div>{{ ts('店面照片') }}</div>
                    <div>({{ ts('至少三张以上') }})</div>
                </div>
                <div class="form-input">
                    <div class="warranty-image-wrapper" id="store_picture">
                        <div class="warranty-image-list">
                        </div>
                        <div class="add">
                            <i class="fa fa-plus open"></i>
                            <input type="file" name="file" class="store-upload-image" accept="image/*">
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-item form-s1">
                <div class="form-label" required="">
                    <div>{{ ts('上传完整的合同') }}</div>
                </div>
                <div class="form-input">
                    <x-warranty-image-upload></x-warranty-image-upload>
                </div>
            </div>

            <h3 class="section_sub_title">{{ ts('钻石等级认证') }}</h3>
            <div class="form-item form-s1">
                <div class="form-label" required="">{{ ts('zsdj') }}</div>
                <div class="form-input">
                    <select name="zsdj" class="form-control"@if( session()->get('admin.user_type')!=1) style="pointer-events:none"@endif>
                        @foreach([0,3,5] as $v)
                            <option value="{{ $v }}" {{ old('zsdj') == $v ? 'selected' : '' }}>{{ ts('zsdj'.$v) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="form-item form-s1">
                <div class="form-label">{{ ts('认证时间') }}</div>
                <div class="form-input">
                    <input type="text" id="cert_date" name="cert_date" value="{{ $data->cert_date ?: old('cert_date') }}" class="form-control" >
                </div>
            </div>
            <div class="form-item form-s1">
                <div class="form-label">{{ ts('认证费用') }}</div>
                <div class="form-input">
                    <input type="text" name="cert_fee" value="{{ $data->cert_fee ?: old('cert_fee') }}" class="form-control" @if( session()->get('admin.user_type')==2) disabled @endif>
                </div>
            </div>

            <div class="form-item form-s1">
                <div class="form-label"><div>{{ ts('认证图片') }}</div></div>
                <div class="form-input">
                    <div class="qrcode-image-wrapper" id="cert_picture">
                        <div class="qrcode-list">
                            <input type="file"  name="file" class="cert_picture" accept="image/*" @if(!in_array(session()->get('admin.user_type'), [1, 4])) disabled @endif>
                            @if (!empty($data->cret_picture))
                                <div class="item">
                                    <input type="text" hidden value="{{ $data->cert_picture ?? '' }}" name="cert_picture">
                                    <img src="{{ getInstallPicture($data->cert_picture ?? '')}}">
                                    <i class="fa fa-trash-o x-close"></i>
                                </div>
                            @else
                                <i class="fa fa-plus open qrcode-open"></i>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="form-item form-s1">
                <div class="form-label">{{ ts('认证状态') }}</div>
                <div class="form-input">
                    <select name="cert_status" class="form-control"@if( session()->get('admin.user_type')==2) disabled @endif>
                        <option value="0">{{ ts('选择认证状态') }}</option>
                        <option value="1" {{ old('cert_status') == 1 ? 'selected' : '' }}>{{ ts('未完成') }}</option>
                        <option value="2" {{ old('cert_status') == 2 ? 'selected' : '' }}>{{ ts('已完成') }}</option>
                    </select>
                </div>
            </div>

            <h3 class="section_sub_title">{{ ts('其他信息') }}&nbsp;&nbsp;
                <button type="button" class="btn btn-info btn-sm operate-other" onclick="showOther()">
                    {{ ts('展开') }}
                </button>
            </h3>
            <div class="form-item form-s1 form-other">
                <div class="form-label">{{ ts('授权日期') }}</div>
                <div class="form-input">
                    <x-flatpickr-date-range label=""></x-flatpickr-date-range>
                </div>
            </div>

            <!--<div class="form-item form-s1 form-other">
                <div class="form-label" required="">授权编号</div>
                <div class="form-input">
                    <input type="text" name="store_code" value="{{ old('store_code') }}" class="form-control" required>
                </div>
            </div>-->

            <div class="form-item form-s1 form-other">
                <div class="form-label">{{ ts('营业时间') }}</div>
                <div class="input-group mb-3 custom-control-inline flatpickr-date-range" style="max-width: 500px;">
                    <input type="text" name="start_time" placeholder="" id="start_time" class="start_time flatpickr form-control" value="{{ request()->input('startdate') }}">
                    <div class="input-group-prepend">
                        <span class="input-group-text">{{ ts('TO') }}</span>
                    </div>
                    <input type="text" name="end_time" placeholder="{{ ts('结束时间') }}" id="end_time" class="end_time flatpickr form-control" value="{{ request()->input('enddate') }}">
                </div>
            </div>

            <div class="form-item form-s1 form-other" style="height: 400px;">
                <div class="form-label">{{ ts('店面介绍') }}</div>
                <div class  ="form-input">
                    <div id="store_detail" name="store_detail" class="text" style="width:800px; height:200px;"></div>
                </div>
            </div>

            <div class="form-item form-s1 form-other">
                <div class="form-label">
                    <div>服务承诺</div>
                </div>
                <div class="form-input">
                    <div class="warranty-image-wrapper" id="store_picture">
                        <textarea class="form-control" name="performance_pledge"></textarea>
                    </div>
                </div>
            </div>

            <div class="form-item form-s1 form-other">
                <div class="form-label">
                    <div>{{ ts('所获荣誉') }}</div>
                </div>
                <div class="form-input">
                    <div class="warranty-image-wrapper" id="store_picture">
                        <textarea class="form-control" name="honor"></textarea>
                    </div>
                </div>
            </div>

            <div class="form-item form-s1 form-other">
                <div class="form-label">
                    <div>{{ ts('二维码图片上传') }}</div>
                </div>
                <div class="form-input">
                    <div class="qrcode-image-wrapper" id="qrcode_picture">
                        <div class="qrcode-list">
                            <input type="file" name="file" class="qrcode_image" accept="image/*">
                        </div>
                    </div>
                </div>
            </div>

            <!--<div class="form-item form-s1 form-other">
                <div class="form-label" required="">
                    <div>照片</div>
                </div>
                <div class="form-input">
                    <div class="warranty-image-wrapper" id="picture_url">
                        <div class="warranty-image-picture-list">
                        </div>
                        <div class="add">
                            <i class="fa fa-plus open"></i>
                            <input type="file" name="picture_url" class="picture-upload-image" accept="image/*">
                        </div>
                    </div>
                </div>
            </div>-->
            <div class="form-item form-s1 form-other">
                <div class="form-label">{{ ts('视频') }}</div>
                <div class="form-input">
                    <input type="text" id="video_url" name="video_url" class="video_url form-control" placeholder="{{ ts('视频链接') }}" />
                    <input class="upload" type="file" name="video_file" id="video_file" onchange=onUpload2(this.files[0]) style="width: 75px; border: none;">
                    <div class="preview preview2"></div>
                </div>
            </div>
            <div class="form-item form-s1 form-other">
                <div class="form-label">{{ ts('是否推荐') }}</div>
                <div class="form-input" style="width: 30px;">
                    <select name="is_advanced" class="form-control" style="width: 60px;" @if(!in_array(session()->get('admin.user_type'), [1, 4])) disabled @endif>
                        <option value="1">{{ ts('YES') }}</option>
                        <option value="2" selected>{{ ts('NO') }}</option>
                    </select>
                </div>
            </div>

            <div class="form-item form-s1 form-other">
                <div class="form-label">官网是否显示</div>
                <div class="form-input" style="width: 30px;">
                    <select name="front_show" class="form-control" style="width: 60px;" @if(!in_array(session()->get('admin.user_type'), [1, 4])) disabled @endif>
                        <option value="1" selected>{{ ts('YES') }}</option>
                        <option value="2">{{ ts('NO') }}</option>
                    </select>
                </div>
            </div>
            
               <div class="form-item form-s1 form-other">
                <div class="form-label">报价系统是否显示</div>
                <div class="form-input" style="width: 30px;">
                    <select name="baojia_show" class="form-control" style="width: 60px;" @if(!in_array(session()->get('admin.user_type'), [1, 4])) disabled @endif>
                        <option value="1" selected>{{ ts('YES') }}</option>
                        <option value="0">{{ ts('NO') }}</option>
                    </select>
                </div>
            </div>
            <h3 class="section_sub_title">{{ ts('explain') }}</h3>
            <div class="mt-3" style="width: 650px;max-width: 100%;padding-left: 2rem;">
                <textarea name="note" id="" class="form-control">{{ @$data->note ?: old('note') }}</textarea>
            </div>

            <div class="mt-4">
                <button class="btn btn-primary" id="submit">{{ ts('submit') }}</button>
            </div>
        </form>

    </div>

    <template id="StorageImageItem">
        <div class="item">
            <input type="text" hidden value="" name="storage_images[]">
            <img src="{{ getInstallPicture(@$v->image_src) }}">
            <i class="fa fa-trash-o x-close"></i>
        </div>
    </template>
    <template id="QrCodeImageItem">
        <div class="item">
            <input type="text" hidden value="" name="cert_picture">
            <img src="{{ getInstallPicture($v->cert_picture ?? '') }}">
            <i class="fa fa-trash-o x-close"></i>
        </div>
    </template>
    <template id="QrImageItem">
        <div class="item">
            <input type="text" hidden value="" name="qrcode_images[]">
            <img src="">
            <i class="fa fa-trash-o x-close"></i>
        </div>
    </template>
    <template id="PictureImageItem">
        <div class="item">
            <input type="text" hidden value="" name="picture_url[]">
            <img src="">
            <i class="fa fa-trash-o x-close"></i>
        </div>
    </template>
    <template id="jshudjPersonImageItem">
        <div class="item">
            <input type="text" hidden value="" name="jshudj_persons_photo[]">
            <img src="">
            <i class="fa fa-trash-o x-close"></i>
        </div>
    </template>
    <template id="jsdjPersonImageItem">
        <div class="item">
            <input type="text" hidden value="" name="jsdj_persons_photo[]">
            <img src="">
            <i class="fa fa-trash-o x-close"></i>
        </div>
    </template>
@endsection


@section('script')
    <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>-->
    <script type="text/javascript" src="/dist/wangEditor.min.js"></script>
    <script>
        const E = window.wangEditor
        const editor = new E('#store_detail')
        const $text1 = $('#store_detail')
        editor.config.onchange = function (html) {
            // 第二步，监控变化，同步更新到 textarea
            $text1.val(html)
        }
        editor.config.uploadFileName = 'file'
        editor.config.uploadImgServer = '/admin/store/uploadImage'
        editor.create()

        $("#cert_date").flatpickr({
            locale: "zh"
        });
        function storeQrcode(data) {
            let html = $('#QrCodeImageItem').html()
            let item = $(html)
            item.find('input').val(data.url)
            item.find('img').attr('src', data.host + data.url)
            return item;
        }
        $("body").on("change", ".province_data", function () {
            console.log($(this).val());
            $('.city_data_json').empty().append(makeSelectOptions(getCityByProvinceId($(this).val())))
            $.ajax({
                url: '/admin/dealer/store_code?province_id=' + $(this).val(),
                data: {},
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    console.log(data)
                    if (data.code != 0) {
                        toastr.error(data.msg)
                        return false;
                    } else {
                        $("#new_store_code").val(data.new_store_code)
                    }

                }
            });
        })
        $(function () {
            $("#start_time").flatpickr({
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
                time_24hr: true,
                minTime: "00:00",
                maxTime: "12:00",
            });
            $("#end_time").flatpickr({
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
                time_24hr: true,
                minTime: "12:00",
                maxTime: "23:00",
            });
            $(".province_json, .city_json, .creator_id, .city_data_json").select2();
            let province_id = $('.province_json').val()
            let city_value = $('.city_data_json').data('value');
            if (province_id) {
                $('.city_data_json').empty().append(makeSelectOptions(getCityByProvinceId(province_id), city_value))
            }

            $(".add_system").on('click', function () {
                let html = '<tr><td><input type="text" name="system_user[]" class="form-control" value="" /></td><td>';
                    html += '<select class="form-control" name="system_name[]"><option value="">请选择</option> <option value="iphone">iphone</option><option value="ipad">ipad</option></select></td><td><input type="text" name="system_phone[]" class="form-control" value="" /></td>';
                    html += '<td><button type="button" class="btn btn-danger btn-sm delete_system">删除</button></td></tr>';
                $(".system-table").append(html);
            });
            $(".add_person").on("click", function() {
                let html = '<tr><td><input type="text" name="cert_person[]" class="form-control" value="" /></td>';
                    html += '<td><input type="text" name="cert_person_level[]" class="form-control" value="" /></td>';
                    html += '<td><input type="text" name="cert_person_mobile[]" class="form-control" value="" /></td>';
                    html += '<td><button type="button" class="btn btn-danger btn-sm delete_person">删除</button></td></tr>';
                $(".cert-person-table").append(html);
            });
        });
        $('body').on('change', '.cert_picture', function() {
            var that = $(this)
            var files = $(this)[0].files
            for (var i = 0; i <= files.length - 1; i++) {
                var formData = new FormData()
                formData.append('file', files[i])
                request.post('/admin/ajax/upload_file', formData)
                    .then( function(d) {
                        var data = d.data;
                        console.log(data);
                        $('.qrcode-open').hide();
                        that.parents('.qrcode-list').append(storeQrcode(data))
                    })
                    .catch(function(e){
                        sweetAlert('', e.msg || 'error', 'error')
                        console.log(e);
                    })
            }
            that.val('')
        });
        $('body').on('click', '.qrcode-list .x-close', function() {
            var that = $(this)
            $('.qrcode-open').show();
            $(this).parents('.item').remove();
        });
        $('body').on("click", '.delete_system', function() {
           $(this).parent().parent().remove();
        });
        $('body').on("click", '.delete_person', function() {
           $(this).parent().parent().remove();
        });
        $('body .dealer-form input[name="unique_id"]').on('change blur input propertychange', function () {
            var unique_id = /^CN[0-9]{4,7}$/;
            var unique_id_val = $(this).val();
            if (! unique_id.test(unique_id_val)) {
                $('#did1').addClass('active');
            } else {
                $('#did1').removeClass('active');
            }
        });
        $('body .dealer-form input[name="email_address"]').on('change blur input propertychange', function () {
            var test = /^\w{1,}@\S{1,}\.\w{1,}$/;
            var val = $(this).val();
            if (val && !myTestV1('email', val)) {
                $('#did3').addClass('active');
            } else {
                $('#did1').removeClass('active');
            }
        });

        $("#submit").on("click", function() {
            if (checkForm()) {
                let form = formObjV2('form.dealer-form');
                let content = editor.txt.html();
                form.content = content;
                console.log(form);
                $.ajax({
                    url: '/admin/dealer/save',
                    data: form,
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        console.log(data)
                        if (data.code != 0) {
                            toastr.error(data.msg)
                            return false;
                        }

                        swal('', '添加成功！', 'success')
                            .then(function (d) {
                                window.location.assign('/admin/dealer');
                            })
                    }
                });
            }

            return false
        })

        function checkForm() {
            var form = formObjV2('form.dealer-form');
            var msg = '';
            if ($(this).find('input[name="unique_id"]').attr('readonly')) {

            } else {
                if (!myTestV1('unique_id', form.unique_id)) {
                    msg = '账号不符合规则！账号规则为CN+（4-7）位数字组成'
                    $(this).find('input[name="unique_id"]').focus();
                }
            }
            if (form.email_address && !myTestV1('email_address', form.email_address)) {
                if (!myTestV1('email', email_address_val)) {
                    msg = '邮箱 格式不符合规范！';
                    $(this).find('input[name="email_address"]').focus();
                }
            }
            if (!form.company_name) {
                msg = '公司名称 不能为空！';
            }
            if (!form.phone_number) {
                msg = '联系电话 不能为空！';
            }
            if (!form.region_id) {
                msg = '区域 不能为空！';
            }
            if (!form.province_id) {
                msg = '省 不能为空！';
            }
            if (!form.city) {
                msg = '城市 不能为空！';
            }
            if (!form.address) {
                msg = '地址 不能为空！';
            }
            if (!form.first_name) {
                msg = '联系人 不能为空！';
            }
            if (!form.images || form.images.length < 1) {
                msg = '上传完整的合同不能少于一张';
            }
            if (!form.storage_images || form.storage_images.length < 3) {
                msg = '店面扫描图片不能少于三张';
            }
            /*let zsdj = form.zsdj;
            if (zsdj > 0) {
                if (!form.cert_date) {
                    msg = '认证日期 不能为空';
                }
                if (!form.cert_fee) {
                    msg = '认证费用 不能为空';
                }
                if (!form.cert_picture) {
                    msg = '认证图片 不能为空';
                }
            }*/

            if (msg) {
                alert(msg);
                return false;
            }  else {
                return true;
            }


        }

        /*$('form.dealer-form').on('submit', function () {
            var form = formObjV2('form.dealer-form');
            console.log(form);
            return false;
            var msg = '';
            if ($(this).find('input[name="unique_id"]').attr('readonly')) {

            } else {
                if (!myTestV1('unique_id', form.unique_id)) {
                    msg = '账号不符合规则！账号规则为CN+（4-7）位数字组成'
                    $(this).find('input[name="unique_id"]').focus();
                }
            }
            if (form.email_address && !myTestV1('email_address', form.email_address)) {
                if (!myTestV1('email', email_address_val)) {
                    msg = '邮箱 格式不符合规范！';
                    $(this).find('input[name="email_address"]').focus();
                }
            }
            if (!form.company_name) {
                msg = '公司名称 不能为空！';
            }
            if (!form.phone_number) {
                msg = '联系电话 不能为空！';
            }
            if (!form.region_id) {
                msg = '区域 不能为空！';
            }
            if (!form.province_id) {
                msg = '省 不能为空！';
            }
            if (!form.city) {
                msg = '城市 不能为空！';
            }
            if (!form.address) {
                msg = '地址 不能为空！';
            }
            if (!form.first_name) {
                msg = '联系人 不能为空！';
            }



            if (msg) {
                alert(msg);
                return false;
            }  else {
                return true;
            }
        });
*/
        function storeWIU(data) {
            var html = $('#StorageImageItem').html()
            var item = $(html)
            item.find('input').val(data.url)
            item.find('img').attr('src', data.host + data.url)
            return item;
        }
        function personWIU(data,id) {
            itemId = id+'PersonImageItem';
            var html = $('#'+itemId).html()
            var item = $(html)
            item.find('input').val(data.url)
            item.find('img').attr('src', data.host + data.url)
            return item;
        }

        $('body').on('change', '.store-upload-image', function() {
            var that = $(this)
            var files = $(this)[0].files
            for (var i = 0; i <= files.length - 1; i++) {
                var formData = new FormData()
                formData.append('file', files[i])
                request.post('/admin/ajax/upload_file', formData)
                    .then( function(d) {
                        var data = d.data
                        that.parents('.warranty-image-wrapper').find('.warranty-image-list').append(storeWIU(data))
                        if (typeof viewer == 'undefined') {
                            viewer = new Viewer(document.getElementById('store_picture'), {
                                show: function (){
                                    viewer.update();
                                },
                            });
                        }
                        viewer.update();
                    })
                    .catch(function(e){
                        sweetAlert('', e.msg || 'error', 'error')
                        console.log(e);
                    })
            }
            that.val('')
        })
        $('body').on('click', '.warranty-image-wrapper .x-close', function() {
            var that = $(this)
            $(this).parents('.item').remove();
        })

        function storeWIU(data) {
            var html = $('#StorageImageItem').html()
            var item = $(html)
            item.find('input').val(data.url)
            item.find('img').attr('src', data.host + data.url)
            return item;
        }

        function storeQrcode(data) {
            var html = $('#QrCodeImageItem').html()
            var item = $(html)
            item.find('input').val(data.url)
            item.find('img').attr('src', data.host + data.url)
            return item;
        }
        function storeFeatures(data) {
            var html = $('#FeaturesImageItem').html()
            var item = $(html)
            item.find('input').val(data.url)
            item.find('img').attr('src', data.host + data.url)
            return item;
        }

        function storeQrItem(data) {
            var html = $('#QrImageItem').html()
            var item = $(html)
            item.find('input').val(data.url)
            item.find('img').attr('src', data.host + data.url)
            return item;
        }

        $("body").on("click", '.deal_desc', function () {
            var that = $(this);
            that.parents('.detail-image-wrapper').remove();
        });

        $('body').on('change', '.store-upload-detail-image', function() {
            var that = $(this)
            var files = $(this)[0].files
            for (var i = 0; i <= files.length - 1; i++) {
                var formData = new FormData()
                formData.append('file', files[i])
                request.post('/admin/ajax/upload_file', formData)
                    .then( function(d) {
                        var data = d.data;
                        console.log(data);
                        that.parents('.detail-image-area').append(storeFeatures(data));
                        if (typeof viewer == 'undefined') {
                            viewer = new Viewer(document.getElementById('store_picture'), {
                                show: function (){
                                    viewer.update();
                                },
                            });
                        }
                        viewer.update();
                    })
                    .catch(function(e){
                        sweetAlert('', e.msg || 'error', 'error')
                        console.log(e);
                    })
            }
            that.val('')
        });

        $('body').on('change', '.qrcode_image', function() {
            var that = $(this)
            var files = $(this)[0].files
            for (var i = 0; i <= files.length - 1; i++) {
                var formData = new FormData()
                formData.append('file', files[i])
                request.post('/admin/ajax/upload_file', formData)
                    .then( function(d) {
                        var data = d.data;
                        console.log(data);
                        that.parents('.qrcode-list').append(storeQrItem(data))
                    })
                    .catch(function(e){
                        sweetAlert('', e.msg || 'error', 'error')
                        console.log(e);
                    })
            }
            that.val('')
        })

        $('body').on('change', '.store-upload-image', function() {
            var that = $(this)
            var files = $(this)[0].files
            for (var i = 0; i <= files.length - 1; i++) {
                var formData = new FormData()
                formData.append('file', files[i])
                request.post('/admin/ajax/upload_file', formData)
                    .then( function(d) {
                        var data = d.data;
                        console.log(data);
                        that.parents('.warranty-image-wrapper').find('.warranty-image-list').append(storeWIU(data))
                        if (typeof viewer == 'undefined') {
                            viewer = new Viewer(document.getElementById('store_picture'), {
                                show: function (){
                                    viewer.update();
                                },
                            });
                        }
                        viewer.update();
                    })
                    .catch(function(e){
                        sweetAlert('', e.msg || 'error', 'error')
                        console.log(e);
                    })
            }
            that.val('')
        })
        $('body').on('change', '.person_upload_image', function(e) {
            var id = e.target.id;
            console.log(id);
            var that = $(this)
            var files = $(this)[0].files
            for (var i = 0; i <= files.length - 1; i++) {
                var formData = new FormData()
                formData.append('file', files[i])
                request.post('/admin/ajax/upload_file', formData)
                    .then( function(d) {
                        var data = d.data
                        that.parents('.warranty-image-wrapper').find('.warranty-image-list').append(personWIU(data,id))
                        //that.parents('.warranty-image-wrapper').find('.add').hide();
                        if (typeof viewer == 'undefined') {
                            viewer = new Viewer(document.getElementById(id+'_upload_image'), {
                                show: function (){
                                    viewer.update();
                                },
                            });
                        }
                    })
                    .catch(function(e){
                        sweetAlert('', e.msg || 'error', 'error')
                        console.log(e);
                    })
            }
            that.val('')
        })

      
        $('body').on('click', '.qrcode-list .x-close', function() {
            var that = $(this)
            $(this).parents('.item').remove();
        })

        $('body').on('click', '.detail-list .x-close', function() {
            var that = $(this)
            $(this).parents('.item').remove();
        })

        function onUpload2 (file) {
            console.log(file);
            var blob = new Blob([file]), // 文件转化成二进制文件
                url = URL.createObjectURL(blob); //转化成url
            if (/video/g.test(file.type)) {
                var video = $('<video controls src="' + url + '">');
                $('.preview2').html('').append(video);
                video[0].onload = function(e) {
                    URL.revokeObjectURL(this.src);  // 释放createObjectURL创建的对象
                }
                let formData = new FormData();
                formData.append('file', file);
                $.ajax({
                    url: '/admin/store/uploadVideo',
                    data: formData,
                    type: 'post',
                    contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                    processData: false,  // 增加这一行，不处理参数
                    success: function (data) {
                        console.log(data);
                        if (data.code != 0) {
                            toastr.error(data.msg)
                            return false;
                        }
                        $("#video_url").val(data.data)
                        swal('', '保存成功！', 'success');
                    }
                });
            }
        }

        function storePictureUrl(data) {
            var html = $('#PictureImageItem').html()
            var item = $(html)
            item.find('input').val(data.url)
            item.find('img').attr('src', data.host + data.url)
            return item;
        }

        $('body').on('change', '.picture-upload-image', function() {
            var that = $(this)
            var files = $(this)[0].files
            for (var i = 0; i <= files.length - 1; i++) {
                var formData = new FormData()
                formData.append('file', files[i])
                request.post('/admin/ajax/upload_file', formData)
                    .then( function(d) {
                        var data = d.data
                        that.parents('.warranty-image-wrapper').find('.warranty-image-picture-list').append(storePictureUrl(data))
                        if (typeof viewer == 'undefined') {
                            viewer = new Viewer(document.getElementById('picture_url'), {
                                show: function (){
                                    viewer.update();
                                },
                            });
                        }
                        viewer.update();
                    })
                    .catch(function(e){
                        sweetAlert('', e.msg || 'error', 'error')
                        console.log(e);
                    })
            }
            that.val('')
        })

        let isHidden = 1;
        function showOther() {
            if (isHidden === 1) {
                $(".form-other").show().css('display', 'flex');
                $(".operate-other").html('<span class="glyphicon glyphicon-menu-up"></span>收缩');
                isHidden = 0;
            } else {
                $(".operate-other").html('<span class="glyphicon glyphicon-menu-up"></span>展开');
                $(".form-other").hide();
                isHidden = 1;
            }
        }
    </script>
@endsection
